<template>
  <section class="vpt-base-template"
           v-if="type == '0'">
    <div class="vpt-base-tpml-item"
         v-for="(item, index) in entity.list"
         :key="index">
      <div>{{ item.label }}</div>
      <div class="value">
        {{ addThousandsSeparator(item.value) }} {{ item.unit }}
      </div>
    </div>
  </section>
  <section class="vpt-base-template2"
           v-else>
    <div class="vpt-base-tpml-item"
         v-for="(item, index) in entity.list"
         :key="index">
      <div>{{ item.label }}</div>
      <div class="value">
        {{ addThousandsSeparator(item.value) }} {{ item.unit }}
      </div>
    </div>
  </section>
  <div class="vpt-chart"
       ref="baseEchartRef"
       :style="{ ...echartStyle }"></div>
  <section class="vpt-availability"
           :style="availabilityStyle"
           v-if="type == '0'">
    <div class="vpt-availability-item">
      <span>{{ meanValueText }}</span><span>{{ usage_year }}%</span>
    </div>
    <div class="vpt-availability-item">
      <span>{{ peakValueText }}</span><span>{{ usage_max }}%</span>
    </div>
  </section>
  <section class="vpt-availability"
           :style="availabilityStyle"
           v-else>
    <div class="vpt-availability-item">
      <span>{{ meanValueText }}</span><span>{{ usage_year }}%</span>
    </div>
    <div class="vpt-availability-item">
      <span>{{ peakValueText }}</span><span>{{ usage_max }}%</span>
    </div>
  </section>
</template>
<script setup>
import { computed, nextTick, ref, watch } from "vue";
import * as echarts from "echarts/core";
import { PieChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { addThousandsSeparator } from "@/utils/formatter.js";
import { fontSize } from "@/utils/rem/rem.js";
import { throttle } from "@/utils/throttle";

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  CanvasRenderer,
  PieChart,
]);

const baseEchartRef = ref(null);

const props = defineProps({
  entity: { type: Object, default: () => ({}) },
  width: { type: String, default: "100%" },
  height: { type: String, default: "2.5rem" },
  type: {
    type: String,
    default: "0",
  },
  availabilityStyle: {
    type: Object,
    default: () => ({
      width: "auto",
      marginTop: "0.16rem",
      padding: "0.12rem",
      fontSize: "0.14rem",
    }),
  },
  titleProps: { type: Object, default: () => ({}) },
  center: { type: Array, default: () => ["50%", "52%"] },
  radius: { type: Array, default: () => ["70%", "90%"] },
  meanValueText: { type: String, default: '月平均' },
  peakValueText: { type: String, default: '年平均' }
});

let baseChart = null;
const chartOption = ref({});

const echartStyle = computed(() => {
  const { width, height } = props;
  const reg = /%$/;
  return {
    width: reg.test(width) ? width : `${width}`,
    height: reg.test(height) ? height : `${height}`,
  };
});

const chartData = computed(() => {
  return [
    { value: props.entity.percentageValue, name: "percentageValue" },
    { value: props.entity.percentageDrag, name: "percentageDrag" },
  ];
});

const usage_year = computed(() => {
  return parseFloat(Number(props.entity.usage_year).toFixed(2));
});

const usage_max = computed(() => {
  return parseFloat(Number(props.entity.usage_max).toFixed(2));
});

watch(
  () => props.entity,
  () => {
    nextTick(() => {
      getOption();
      initChart();
    });
  },
  { deep: true }
);

const initChart = () => {
  // if (!baseChart) {
  baseChart = echarts.init(baseEchartRef.value);
  randerChart();
  window.addEventListener("resize", () => {
    setTimeout(() => {
      baseChart.resize();
      throttle(getOption, 500)();
      randerChart();
    }, 100);
  });
  // }
};

const randerChart = () => {
  baseChart.setOption(chartOption.value, true);
};

function getOption () {
  chartOption.value = {
    title: {
      text:
        "{name|" +
        props.entity.name +
        "}\n{val|" +
        props.entity.percentageValue +
        "%}",
      left: "46.5%",
      top: "28%",
      textAlign: "center",
      textStyle: {
        color: "#fff",
        fontWeight: 400,
        height: fontSize(30),
        fontFamily: "HarmonyOS_SansSC_Medium",
        rich: {
          name: {
            fontSize: fontSize(14),
            fontWeight: "400",
            color: "#ffffffb3",
            padding: [10, 0],
            fontFamily: "HarmonyOS_SansSC_Medium",
          },
          val: {
            fontSize: fontSize(20),
            padding: [0, 0, 0, 4],
            // fontWeight: 700,
            color: props.entity.centerFontColor,
            fontFamily: "HarmonyOS_SansSC_Medium",
          },
        },
      },
      ...props.titleProps,
    },
    tooltip: {
      show: false,
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "center",
      show: false,
    },
    series: [
      {
        name: props.entity.name,
        center: props.center,
        type: "pie",
        radius: props.radius,
        selectedMode: false,
        hoverAnimation: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: false,
          },
        },
        labelLine: {
          show: false,
        },
        data: chartData.value,
        color: props.entity.percentageColor,
        // color: ['#00B675', '#1e3651']
      },
    ],
  };
}
</script>
<style lang="less" scoped>
.vpt-chart {
  margin-top: 0.08rem;
}

.vpt-base-template {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 0.16rem;

  .vpt-base-tpml-item {
    font-size: 0.14rem;
    color: #ffffffb3;
    margin-bottom: 0.04rem;
    text-align: center;
    line-height: 0.2rem;

    label {
      color: #ffffffb3;
      letter-spacing: 0;
    }

    .value {
      margin-top: 0.03rem;
      color: #fff;
    }
  }
}

.vpt-base-template2 {
  // width: 100%;
  margin-top: 0.14rem;
  margin-left: 0.12rem;
  margin-right: 0.12rem;

  .vpt-base-tpml-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.14rem;
    color: #ffffffb3;
    margin-bottom: 0.04rem;
    text-align: center;
    line-height: 0.2rem;

    label {
      color: #ffffffb3;
      letter-spacing: 0;
    }

    .value {
      margin-top: 0.03rem;
      color: #fff;
    }
  }
}

.vpt-availability {
  // width: 1.7rem;
  margin: auto;
  margin-top: 0.16rem;
  padding: 0.12rem;
  font-size: 0.14rem;
  border: 0.01rem solid #e6ebf5;
  background: #1470cc1a;
  color: #ffffffb3;

  .vpt-availability-item {
    display: flex;
    justify-content: space-between;
    align-content: center;

    &:first-child {
      margin-bottom: 0.08rem;
    }
  }
}
</style>